<template>
    <div class="page-container zjdf">
        
        <div class="page-main">
            <div class="searchBox clearfix">
                <div class="condition">
                    <el-select v-model="selectschool" class="genSelect item mr20 w150" placeholder="请选择学校">
                        <el-option
                        v-for="item in schools"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>

        

            <div class="teacherList pdt20">
                <div class="title">对以下老师进行打分（{{num}}人）</div>
                <div class="teazone clearfix" id="teazone">
                    <div class="card" v-for="(item,index) in nowList" :key="index">
                        <div class="top">
                            <div class="avatar">
                                <img v-if="item.avatar" :src="item.avatar" >
                            </div>
                            <div class="right">
                                <div class="name"><span :class="[{'man':item.sex==0},{'woman':item.sex==1}]">{{item.name}}</span></div>
                                <div class="titles">{{item.titles}} | {{item.xl}}</div>
                            </div>
                        </div>
                        <div class="mid">
                            <div class="item"><span>任教学段：</span>{{item.rjxd}}</div>
                            <div class="item"><span>任教科目：</span>{{item.subject}}</div>
                            <div class="item"><span>打分项目：</span>{{item.dfxm}}</div>
                        </div>
                        <div class="bot">
                            <div class="button" @click="Grade(index)" v-if="!item.isgrade">立即打分</div>
                            <div class="button isgrade" v-else>已打分</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="dialog" v-if="visible">
            <div class="inner">
                <div class="close" @click="close2"></div>
                <div class="title">郑丽丽打分表</div>
                <div class="item">
                    <div class="leftpart">教师教学内容和目标</div>
                    <div class="rightpart">
                        <div class="inputzone">
                            <div class="decrease" @click="stuscore.s1?stuscore.s1--:''">
                                <div class="minius"></div>
                            </div>
                            <input type="text" class="input" v-model="stuscore.s1">
                            <div class="increase" @click="stuscore.s1?stuscore.s1++:''">
                                <div class="plus"></div>
                            </div>
                        </div>
                        <span>分</span>
                    </div>
                </div>
                <div class="shuomingbox"><textarea ></textarea></div>
                <div class="item">
                    <div class="leftpart">教学过程和方法</div>
                    <div class="rightpart">
                        <div class="inputzone">
                            <div class="decrease" @click="stuscore.s2?stuscore.s2--:''">
                                <div class="minius"></div>
                            </div>
                            <input type="text" class="input" v-model="stuscore.s2">
                            <div class="increase" @click="stuscore.s2?stuscore.s2++:''">
                                <div class="plus"></div>
                            </div>
                        </div>
                        <span>分</span>
                    </div>
                </div>
                <div class="shuomingbox"><textarea ></textarea></div>
                <div class="item">
                    <div class="leftpart">教师的基本素养</div>
                    <div class="rightpart">
                        <div class="inputzone">
                            <div class="decrease" @click="stuscore.s3?stuscore.s3--:''">
                                <div class="minius"></div>
                            </div>
                            <input type="text" class="input" v-model="stuscore.s3">
                            <div class="increase" @click="stuscore.s3?stuscore.s3++:''">
                                <div class="plus"></div>
                            </div>
                        </div>
                        <span>分</span>
                    </div>
                </div>
                <div class="shuomingbox">
                    <textarea ></textarea>
                </div>
                <div class="shuoming">说明（可选）</div>
                <div class="textarea">
                    <textarea ></textarea>
                </div>
                <div class="line"></div>
                <div class="sub" @click="close1">立即提交</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            visible:false,
            selectschool:1,
            num:0,
            width:0,
            stuscore:{
                s1:'',
                s2:'',
                s3:'',
            },
            schools:[
                {
                    value:1,
                    label:'东湖中学'
                },
                {
                    value:2,
                    label:'新湾中学'
                },
                {
                    value:3,
                    label:'江湾小学'
                }
            ],
            teaList:[
                {
                    name:'郑丽丽',
                    avatar:require('@/assets/img/expert/female.png'),
                    sex:1, //0男 1女
                    titles:"高级教师",
                    xl:"硕士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"语文",
                    school:1,
                    isgrade:0,
                    dfxm:'课堂观察'
                },
                {
                    name:'王晓明',
                    avatar:require('@/assets/img/expert/male.png'),
                    sex:0, //0男 1女
                    titles:"高级教师",
                    xl:"博士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"数学",
                    school:1,
                    isgrade:0,
                    dfxm:'教研能力'
                },
                {
                    name:'王芸芸',
                    titles:"高级教师",
                    xl:"硕士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"语文",
                    school:1,
                    isgrade:0,
                    dfxm:'教研能力'
                },
                {
                    name:'郑小芸',
                    avatar:require('@/assets/img/expert/female.png'),
                    sex:1, //0男 1女
                    titles:"高级教师",
                    xl:"硕士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"英语",
                    school:1,
                    isgrade:1,
                    dfxm:'课堂观察'
                },
                {
                    name:'张伟',
                    avatar:require('@/assets/img/expert/male.png'),
                    sex:0, //0男 1女
                    titles:"高级教师",
                    xl:"博士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"英语",
                    school:1,
                    isgrade:1,
                    dfxm:'课堂观察'
                },
                {
                    name:'刘强',
                    avatar:require('@/assets/img/expert/male.png'),
                    sex:0, //0男 1女
                    titles:"高级教师",
                    xl:"博士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"数学",
                    school:1,
                    isgrade:1,
                    dfxm:'教研能力'
                },
                {
                    name:'张冰',
                    avatar:require('@/assets/img/expert/female.png'),
                    sex:1, //0男 1女
                    titles:"高级教师",
                    xl:"博士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"语文",
                    school:1,
                    isgrade:1,
                    dfxm:'教研能力'
                },
                {
                    name:'李琳',
                    avatar:require('@/assets/img/expert/female.png'),
                    sex:1, //0男 1女
                    titles:"高级教师",
                    xl:"博士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"英语",
                    school:1,
                    isgrade:1,
                    dfxm:'课堂观察'
                },
                {
                    name:'李子明',
                    avatar:require('@/assets/img/expert/male.png'),
                    sex:0, //0男 1女
                    titles:"高级教师",
                    xl:"硕士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"语文",
                    school:2,
                    isgrade:0,
                    dfxm:'教研能力'
                },
                {
                    name:'王小明',
                    avatar:require('@/assets/img/expert/male.png'),
                    sex:0, //0男 1女
                    titles:"高级教师",
                    xl:"硕士研究生",
                    rjxd:"一年级、二年级、三年级",
                    subject:"语文",
                    school:3,
                    isgrade:0,
                    dfxm:'教研能力'
                },
            ],
            nowList:[]
        }
    },
    mounted(){
        this.teaList.forEach(item=>{
            if(item.school==this.selectschool){
                this.nowList.push(item)
            }
        })
        this.num=this.nowList.length
        this.width=document.getElementById('teazone').offsetWidth
    },
    watch:{
        selectschool(){
            this.nowList=[]
            this.teaList.forEach(item=>{
                if(item.school==this.selectschool){
                    this.nowList.push(item)
                }
            })
            this.num=this.nowList.length
        }
    },
    methods:{
        Grade(val){
            this.visible=true
            this.$store.dispatch("set_isMaskShow",'open')
            localStorage.setItem('gradeIndex',val)
        },
        close1(){
            let gradeIndex=localStorage.getItem('gradeIndex')
            this.nowList[gradeIndex].isgrade=1
            this.visible=false
            this.$store.dispatch("set_isMaskShow",'close')
            this.stuscore={}
        },
        close2(){
            this.visible=false
            this.$store.dispatch("set_isMaskShow",'close')
            this.stuscore={}
        }
    }
}
</script>
<style lang="scss" scoped>
.zjdf{
    /deep/.el-input__inner{
        border-radius: 20px 20px;
        border: none;
    }
}
.page-main{
    padding: 30px 40px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30px;
}
.teacherList{
    .teazone{
        color: #333333;
        font-size: 16px;
        min-width: 1000px;
        .card{
            width: 24%;
            height: 320px;
            box-shadow: 0 1px 10px 0 rgba($color: #3b64a8, $alpha: .1);
            border-radius: 10px 10px;
            position: relative;
            display: flex;
            flex-direction: column;
            margin-right: 1%;
            margin-bottom: 23px;
            float: left;
            background: #ffffff;
            
            &:hover{
                transform: translateY(-2px);
                box-shadow: 0 10px 50px rgba($color: #3b64a8, $alpha: .2);
            }
            &.three-card{
                width: 31%;
                margin-right: 2%;
            }
            .top{
                width: 100%;
                height: 145px;
                position: relative;
                .avatar{
                    position: absolute;
                    left: 40px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 80px;
                    height: 80px;
                    border-radius: 50% 50%;
                    background: #ccd2e3;
                    img{
                        display: block;
                        border-radius: 50% 50%;
                        width: 100%;
                        height: 100%;
                    }
                }
                .right{
                    position: absolute;
                    left: 140px;
                    top: 50%;
                    transform: translateY(-50%);
                    .name{
                        font-size: 24px;
                        font-weight: bold;
                        line-height: 24px;
                        margin-bottom: 12px;
                        .woman{
                            position: relative;
                            &::after{
                                content: '';
                                display: block;
                                position: absolute;
                                width: 50px;
                                height: 24px;
                                right: -60px;
                                top: 50%;
                                transform: translateY(-50%);
                                background: url(~@/assets/img/expert/woman.png) no-repeat;
                                background-size: 100% auto;
                            }
                        }
                        .man{
                            position: relative;
                            &::after{
                                content: '';
                                display: block;
                                position: absolute;
                                width: 50px;
                                height: 24px;
                                right: -60px;
                                top: 50%;
                                transform: translateY(-50%);
                                background: url(~@/assets/img/expert/man.png) no-repeat;
                                background-size: 100% auto;
                            }
                        }
                    }
                    .titles{
                        color: #666666;
                        line-height: 16px;
                    }
                }
            }
            .mid{
                width: 100%;
                height: 45px;
                padding-left: 40px;
                .item{
                    max-width: 220px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 16px;
                    margin-bottom: 8px;
                    span{
                        font-weight: bold;
                    }
                }
            }
            .bot{
                width: 100%;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                .button{
                    background: #3964f9;
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 140px;
                    height: 44px;
                    border-radius: 22px;
                    cursor: pointer;
                    transition: .2s all;
                    &:hover{
                        background:#4b72f9
                    }
                    &.isgrade{
                        background: #cdd5dd;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 1500px) {
        .teazone .card {
            width: 31%;
            margin-right: 2%;
        }
    }
}
.dialog{
    background: #ffffff;
    width: 50%;
    max-width: 840px;
    height: 900px;
    position: absolute;
    z-index: 3001;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #333333;
    .inner{
        position: relative;
        padding: 57px 80px 0 80px;
        .close{
            position: absolute;
            right: 0;
            top: 0;
            width: 48px;
            height: 48px;
            background: url(~@/assets/img/expert/close.png) no-repeat;
            background-size: 100% auto;
        }
        .title{
            font-size: 40px;
            margin-bottom: 10px;
        }
        .item{
            height: 80px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 20px;
            position: relative;
            .rightpart{
                position: absolute;
                right: 0;
                .inputzone{
                    width: 140px;
                    height: 40px;
                    border-radius: 3px 3px;
                    border: 1px solid#dbdee5;
                    padding: 0 5px;
                    font-size: 18px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 35px;
                    .increase{
                        position: absolute;
                        height: 100%;
                        width: 25%;
                        right: 0;
                        top: 0;
                        background: #f5f7fa;
                        border-radius: 0 3px 3px 0;
                        border-left: 1px solid #dbdee5;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .plus{
                            width: 9px;
                            height: 9px;
                            background: url(~@/assets/img/expert/add.png) no-repeat;
                            background-size: 100% auto;
                        }
                    }
                    .decrease{
                        position: absolute;
                        height: 100%;
                        width: 25%;
                        left: 0;
                        background: #f5f7fa;
                        top: 0;
                        border-radius: 3px 0 0 3px;
                        border-right: 1px solid #dbdee5;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .minius{
                            width: 9px;
                            height: 9px;
                            background: url(~@/assets/img/expert/minius.png) no-repeat;
                            background-size: 100% auto;
                            margin-top: 6px;
                        }
                    }
                    .input{
                        width: 50%;
                        height: 100%;
                        display:block;
                        text-align: center;
                        margin: 0 auto;
                        font-size: 18px;
                    }
                }
                span{
                    display: block;
                    color: #666666;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 0;
                }
            }
        }
        .shuomingbox{
            height: 70px;
            border-radius:5px 5px;
            padding: 10px 10px;
            background: #f7f9fb;
            border:1px solid #dbdee5;
            textarea{
                width: 100%;
                height: 100%;
                resize: none;
                background: #f7f9fb;
                font-size: 18px;
            }
        }
        .shuoming{
            font-size: 20px;
            color: #333333;
            margin: 15px 0 15px 0;
        }
        .line{
            height: 1px;
            width: 100%;
            border-bottom: 1px dotted #d2d5dc;
            margin-bottom: 20px;
        }
        .textarea{
            height: 121px;
            width: 100%;
            border-radius: 5px 5px;
            padding: 10px;
            margin-bottom: 40px;
            background: #f7f9fb;
            border:1px solid #dbdee5;
            textarea{
                width: 100%;
                height: 100%;
                resize: none;
                background: #f7f9fb;
                font-size: 18px;
            }
        }
        .sub{
            width: 400px;
            height: 64px;
            border-radius: 32px 32px;
            background: #3964f9;
            color: #ffffff;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }
    }
}
</style>